<template>
  <div class="Main_pth">
    <div class="Main_of">
      <img class="Main_of_pth" :style="{height:autoHeightTable}" src="../../assets/images/Denglu/u97725.png" />
      <!--./u101996.gif-->
      <div class="Main_text">
        <span>{{wherecome}}</span>
        <span class="Main_text1">欢迎登录宏运集团管理系统</span>
      </div>
      <div class="column_of">
        <img class="column_pht" src="../../assets/images/XuanZeYe/u97891.png" />
        <!--./u102118.png-->
        <div class="column_text">请选择登录公司</div>
      </div>
      <div class="column_of_crton">
        <img class="column_pht1" src="../../assets/images/XuanZeYe/u97889.png" />
        <!--./u102116.png-->
      </div>
      <div class="column_btns">
        <el-row>
          <el-col v-for="(obj,num) in entList" :key="num" :span="6">
            <div class="column_btn" @click="entclick(obj)">
              <div>
                <img class="column_btn_pht" :src="require('../../assets/images/'+obj.path)" alt />
              </div>
              <span class="column_btn_text">{{obj.groupname}}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components: {},
  computed: {
    autoHeightTable() {
      return document.documentElement.scrollHeight - 5 + 'px'
    }
  },
  data() {
    return {
      entList: [],
      enterpristList: {},
      wherecome: ''
    }
  },
  created() {
    this.enterpristList = JSON.parse(localStorage.getItem('enterpristList'))
    // for(var i = 0;i<8;i++){
    //   this.entList.push(this.enterpristList.grouplst[0])
    // }
    this.entList = this.enterpristList.grouplst
    this.wherecome = this.enterpristList.username + '， 您好！'
    console.log(this.autoHeightTable)
  },
  methods: {
    entclick(obj) {
      axios(
        '/apis/PublicAPI.asmx/GetRanks?empno=' +
          this.enterpristList.empno +
          '&groupno=' +
          obj.groupno
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data)
        console.log(datas)
        if (datas.string.__text == '查无此人') {
          this.$message.error('账号或密码错误')
        } else {
          var list = JSON.parse(datas.string.__text)
          console.log(list)
          localStorage.setItem('rankList', JSON.stringify(list.rankList))
          this.store.actions.setToken(list)
          this.store.actions.setRankList(list.rankList)
          // localStorage.setItem('token', data);
          // console.log(this.store.state.token);
          this.$router.push({
            path: '/PersonalCenterHmPg',
            query: { index: 1 }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.Main_pth {
  width: 100%;
  height: 100%;
}
.Main_of_pth {
  width: 100%;
  background: no-repeat;
}
.Main_text {
  color: white;
  position: absolute;
  top: 10%;
  margin-left: 35%;
  font-size: 22px;
}
.Main_text1 {
  margin-left: 30px;
}
.column_of {
  color: white;
  position: absolute;
  top: 20%;
  margin-left: 40%;
}
.column_pht {
  height: 50px;
}
.column_pht1 {
  height: 2px;
  position: absolute;
  top: 40%;
  left: 6%;
  width: 86%;
}
.column_text {
  width: 300px;
  margin-left: 30%;
  margin-top: -17%;
  font-size: 35px;
  font-weight: bold;
}
.column_btns {
  position: absolute;
  text-align: center;
  width: 80%;
  top: 45%;
}
.column_btn {
  height: 160px;
  width: 280px;
  background-color: white;
  border-radius: 8px;
  margin-top: 20px;
  margin-left: 47%;
  cursor: pointer;
}
.column_btn_pht {
  margin-top: 25px;
}
.column_btn_text {
  color: rgb(55, 115, 226);
  font-size: 30px;
  font-weight: bold;
}
.column_btnad {
  height: 160px;
  width: 260px;
  background-color: white;
  margin-left: 5%;
  position: absolute;
  top: 78%;
  border-radius: 8px;
  cursor: pointer;
}
.column_btnad1 {
  height: 160px;
  width: 260px;
  background-color: white;
  margin-left: 20%;
  position: absolute;
  top: 78%;
  border-radius: 8px;
  cursor: pointer;
}
.column_btnad2 {
  height: 160px;
  width: 260px;
  background-color: white;
  margin-left: 50%;
  position: absolute;
  top: 78%;
  border-radius: 8px;
  cursor: pointer;
}
.column_btnad3 {
  height: 160px;
  width: 260px;
  background-color: white;
  margin-left: 70%;
  position: absolute;
  top: 78%;
  border-radius: 8px;
  cursor: pointer;
}
</style>
